<template>
  <div class="IndexPage">
    <!-- title -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div style="display: flex">
            设备编号：
            <el-input placeholder="请输入" style="width: 200px" />
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px"
              >查询</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- main -->
    <el-row>
      <el-col :span="24"
        ><el-card body-style="min-height: 800px">
          <div class="main-btn">
            <el-button
              type="primary"
              icon="el-icon-zoom-in"
              style="margin-left: 10px; background: linear-gradient(135deg,#ff9743,#ff5e20)!important;"
              >新增</el-button
            >
            <el-button
              type="warning"
              plain
              style="margin-left: 10px"
              >批量操作</el-button
            >
          </div>
          <!-- 主体部分 -->
          <div class="mian-form">
            <template>
              <el-table :data="tableData" style="width: 100%">
              <!-- 选择框 -->
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="index" label="序号" width="80"/>
                <el-table-column prop="innerCode" label="设备编号" width="204"/>
                <el-table-column prop="type.name" label="设备型号"> </el-table-column>
                <el-table-column prop="region.name" label="详细地址"> </el-table-column>
                <el-table-column prop="ownerName" label="合作商"> </el-table-column>
                <el-table-column prop="vmStatus" label="设备状态"> </el-table-column>
                <el-table-column label="操作">
                  <el-button type="text">货道</el-button>
                  <el-button type="text">策略</el-button>
                  <el-button type="text">修改</el-button>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页footer -->
          <div class="footer">
            <Footer />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 货道弹出框 -->
    <channelList/>
  </div>
</template>

<script>
import channelList from '@/views/vm/components/channelList.vue'
import Footer from '@/components/public/FtooTer.vue'
import { getEquipmentList } from '@/api/zhang/equipment'
export default {
  components: {
    Footer,
    channelList
  },
  data () {
    return {
      tableData: [],
      channelList: []
    }
  },
  async created () {
    const res = await getEquipmentList()
    // console.log(res.currentPageRecords)
    res.currentPageRecords.forEach((item, index) => {
      this.$set(item, 'index', index + 1)
      if (item.vmStatus === 0) {
        this.$set(item, 'vmStatus', '未投放')
      } else if (item.vmStatus === 1) {
        this.$set(item, 'vmStatus', '运营')
      } else {
        this.$set(item, 'vmStatus', '撤机')
      }
    })
    // console.log(res.currentPageRecords)
    this.tableData = res.currentPageRecords
  },
  methods: {
    // async channelListFn () {
    //   const res = await getChannelList('01000001')
    //   // console.log(res)
    //   this.channelList = res
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.main-form {
  width: 100%;
}
</style>
